<!DOCTYPE html>
<html>
<head th:replace="_header_include::frag(~{::title},~{},~{})">
    <title>后台管理系统</title>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/element-ui.css">
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="addOptimizeRule" class="addOptimizeRule mainPadding" style="display: none;">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>费用设置</el-breadcrumb-item>
        <el-breadcrumb-item>领取规则设置</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="inforTitle">添加领取规则设置</div> 
    <el-form :model="form" :rules="rules" ref="form">
        <div class="borderbox padding20">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="规则名称：" prop="ruleName" :label-width="formLabelWidth">
                        <el-input v-model="form.ruleName" autocomplete="off" style="width: 300px;" maxlength="50"></el-input>
                    </el-form-item>
                </el-col>             
                <el-col :span="12">
                    <el-form-item label="规则有效开始时间：" prop="stime" :label-width="formLabelWidth">
                        <el-date-picker type="datetime" placeholder="选择日期时间" v-model="form.stime" style="width: 300px;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="规则有效结束时间：" prop="etime" :label-width="formLabelWidth">
                        <el-date-picker type="datetime" placeholder="选择日期时间" v-model="form.etime" style="width: 300px;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="资源类别：" prop="source" :label-width="formLabelWidth">
                        <el-select v-model="form.source" multiple placeholder="请选择" style="width: 300px;">
                            <el-option
                                v-for="item in categoryOptions"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="资源项目：" prop="" :label-width="formLabelWidth">
                        <el-select v-model="form.projectId" multiple placeholder="请选择" style="width: 300px;">
                            <el-option
                                v-for="item in projectInfo"
                                :key="item.id"
                                :label="item.projectName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="资源类型：" prop="sourceType" :label-width="formLabelWidth">
                        <el-select v-model="form.sourceType" multiple placeholder="请选择" style="width: 300px;">
                            <el-option
                                v-for="item in clueTypeList"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="每日领取上限（条）：" prop="top" :label-width="formLabelWidth">
                        <el-input v-model="form.top" autocomplete="off" style="width: 300px;" maxlength="8"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设定商家：" prop="setbusiness" :label-width="formLabelWidth">
                        <el-select v-model="form.setbusiness" multiple filterable placeholder="请选择" style="width: 300px;">
                            <el-option
                                v-for="item in merchantNames"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否启用：" prop="status" :label-width="formLabelWidth">
                        <el-select v-model="form.status" placeholder="请选择" style="width:300px;">
                            <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <div class="padding20 f-tac">            
                <el-button type="primary" :disabled="submitDisabled" @click="submitForm('form')">确认</el-button>
                <el-button @click="cancelForm()">取 消</el-button>
            </div> 
        </div>        
    </el-form>  
</div>
</body>
<!-- import Vue before Element -->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">
var clueCategoryList=[[${clueCategoryList}]];// 资源类别
var clueTypeList=[[${clueTypeList}]];// 资源类型
var projectList=[[${projectList}]];// 资源项目
var merchantNames=[[${merchantNames}]];// 设定商家



    var aorVM = new Vue({
        el: '#addOptimizeRule',
        data: function() {
            return {                
                form: {
                    ruleName:"",
                    stime:"",
                    etime:"",
                    source:[],
                    projectId:[],
                    sourceType:[],
                    top:'',
                    setbusiness:[],
                    status:1,
                },
                formLabelWidth: '180px',
                rules:{
                    ruleName: [
                        { required: true, message: '请输入规则名称', trigger: 'blur' }
                    ],
                    stime: [
                        { required: true, message: '请选择规则有效开始时间', trigger: 'blur' }
                    ],
                    etime: [
                        { required: true, message: '请选择规则有效结束时间', trigger: 'blur' }
                    ],
                    // sourceType: [
                    //     {  required: true, message: '请至少选择一个资源类型', trigger: 'change' }
                    // ],
                  // source: [
                  //   {  required: true, message: '请至少选择一个资源类别', trigger: 'change' }
                  // ],
                  setbusiness: [
                    {  required: true, message: '请至少选择一个商家', trigger: 'change' }
                  ],
                    category: [
                        { required: true, message: '请至少选择一个资源类别', trigger: 'change' }
                    ],
                    status: [
                        { required: true, required: true, message: '请选择是否启用', trigger: 'change' }
                    ],                    
                    chooseTeam: [
                                 { validator:function(rule,value,callback){
                                     if(aorVM.form.teleRuleTeamList.length==0&&aorVM.form.trafficRuleTeamList.length==0){
                                         callback(new Error("请添加电销组或话务组"));
                                         return;
                                     }
                                     callback();
                                 }, trigger: 'change'}
                             ],                    
                    orgId: [
                        { required: true, required: true, message: '请选择电销组', trigger: 'change' }
                    ],
                    businessLine: [
                                   { required: true, required: true, message: '请选择业务线', trigger: 'change' }
                               ],
                    proportion: [
                        { required: true, required: true, message: '请输入比例', trigger: 'change'},
                        { validator:function(rule,value,callback){               
                            if(/^[0-9]*$/.test(value) == false){
                               callback(new Error("请输入整数数字"));
                            }else{
                               callback();
                            } 
                            callback();
                        }, trigger: 'change'}
                    ],
                    top: [
                        { required: true, required: true, message: '请输入每日领取上限', trigger: 'change' },
                        { validator:function(rule,value,callback){               
                            if(/^[0-9]*$/.test(value) == false){
                               callback(new Error("请输入整数数字"));
                            }else{
                              callback();
                            }
                            callback();
                        }, trigger: 'change'}
                    ],
                },
                submitDisabled:false,
                clueTypeList:clueTypeList,
                merchantNames:merchantNames,
                categoryOptions:clueCategoryList,
                projectInfo:projectList ,
                statusOptions: [{
                    value: 1,
                    name: '启用'
                }, {
                    value: 0,
                    name: '禁用'
                }]
            }             
        },
        methods: {
            unlimitedBtn(index, rows){                
                rows[index].unlimitedShow=true; 
                rows[index].unlimited="不限";
                rows[index].unlimitedVal="-1"; 
                rows[index].resourceMaxNum="0"; //为了不让校验而赋的无用的值  
                console.log(rows[index].unlimited);
                console.log(rows[index].unlimitedVal);                            
                console.log(rows[index].resourceMaxNum);                          
            },
            unlimitedIpt(index, rows){//点击不限input
                rows[index].unlimitedShow=false 
                rows[index].unlimited="";
                rows[index].unlimitedVal="";
                rows[index].resourceMaxNum="";                    
                console.log(rows[index].unlimited);
                console.log(rows[index].unlimitedVal);                            
                console.log(rows[index].resourceMaxNum);
            },
            submitForm(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        var form = JSON.parse(JSON.stringify(this.form)); 
                        // 开始时间不能大约结束时间
                        var startTime=form.stime;
                        var endTime=form.etime;
                        if(endTime && startTime>endTime){
                            this.$message({
                                message: '结束时间不允许选择早于开始时间',
                                type: 'warning'
                            });
                            return;
                        }
                        var param = {};

                        param.ruleName= form.ruleName;
                        param.stime=form.stime;
                        param.etime=form.etime;
                        param.source=form.source.join(",");
                        param.sourceType=form.sourceType.join(",");
                        param.projectId=form.projectId.join(",");
                        param.top=form.top;
                        param.setbusiness=form.setbusiness.join(",");
                        param.status=form.status;
                        aorVM.submitDisabled=true;
                        axios.post('/merchant/recevieRule/create', param)
                        .then(function (response) {
                               console.info(response);
                            var data =response.data;
                            if(data.code!="0"){
                                aorVM.$message(data.msg);
                                aorVM.submitDisabled=false;
                            }else{
                                aorVM.$message({message:'提交成功',type:'success',duration:1000,onClose:function(){
                                    aorVM.submitDisabled=false;
                                    document.location.href='/merchant/recevieRule/toList';
                                }});
                            }
                        })
                        .catch(function (error) {
                            aorVM.submitDisabled=false;
                            console.log(error);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            deleteRow(index, rows) {//删除一行表格
                rows.splice(index, 1);
            },
            addFun1() {//添加包含搜索词
                let searchWord = this.form.searchWord;
                if (searchWord) {
                    this.tags1.push(searchWord);
                }
                this.form.searchWord = '';
            },
            deleteFun1(tag) {//删除包含搜索词
                this.tags1.splice(this.tags1.indexOf(tag), 1);
            },
            addFun2() {//添加不包含搜索词
                let notSearchWord = this.form.notSearchWord;
                if (notSearchWord) {
                    this.tags2.push(notSearchWord);
                }
                this.form.notSearchWord = '';
            },
            deleteFun2(tag) {//删除不包含搜索词
                this.tags2.splice(this.tags2.indexOf(tag), 1);
            },
            addFun3() {//添加包含省
                let province = this.form.province;
                if (province) {
                    this.tags3.push(province);
                }
                this.form.province = '';
            },
            deleteFun3(tag) {//删除包含省
                this.tags3.splice(this.tags3.indexOf(tag), 1);
            },
            addFun4() {//添加不包含省
                let notProvince = this.form.notProvince;
                if (notProvince) {
                    this.tags4.push(notProvince);
                }
                this.form.notProvince = '';
            },
            deleteFun4(tag) {//删除不包含省
                this.tags4.splice(this.tags4.indexOf(tag), 1);
            },
            addDomain() {
                console.log(businessLineList)
                // 取第一条
                var first=null;
                for(var i=0;i<businessLineList.length;i++){
                    first=businessLineList[0].businessLine;
                }
                var param ={};
                  param.systemCode = "HUIJU";
                  param.orgType = 1;
                  param.businessLine = first;
                  console.info(param);
                  axios.post('/organization/organization/queryOrgByBusinessline', param)
                  .then(function (response) {
                        var result =  response.data;
                        console.info(result);
                        var table=result.data;
                        aorVM.form.teleRuleTeamList.push({
                            orgId: '',                    
                            businessLine: first,//业务线取第一条                 
                            teleOptions:table,                    
                            orgType: '',                    
                            proportion:'',
                            resourceMaxNum:'',
                            isPrior: 0,//默认非优先
                            unlimited:'',//不限层
                            unlimitedVal:'',//不限层取值
                            unlimitedShow:false,//默认不显示
                        });
                  })
                  .catch(function (error) {
                       console.log(error);
                  });
                
            },
            addDomainTraffic() {
                console.log(trafficList)
                // 取第一条
                var first="";
                for(var i=0;i<trafficList.length;i++){
                    first=trafficList[0].id+","+trafficList[0].orgType;
                }
                this.form.trafficRuleTeamList.push({
                    orgId: first,                    
                    orgType: '',                    
                    proportion:'',
                    resourceMaxNum:'',
                    isPrior: 0,//默认非优先
                    unlimited:'',//不限层
                    unlimitedVal:'',//不限层取值
                    unlimitedShow:false,//默认不显示
                });
            },
            resourceMaxNumber(index, rows){
                for(var i=0;i<rows.length;i++){                    
        　　                      rows[i].proportion=rows[i].proportion.replace(/[^\.\d]/g,'');
                    rows[i].proportion=rows[i].proportion.replace('.','');                    
                }
        　　      },
            resourceMaxNumber1(index, rows){
                for(var i=0;i<rows.length;i++){                    
        　　                      rows[i].resourceMaxNum=rows[i].resourceMaxNum.replace(/[^\.\d]/g,'');
                    rows[i].resourceMaxNum=rows[i].resourceMaxNum.replace('.','');                    
                }
        　　      }, 
        　　      cancelForm(){
                document.location.href='/merchant/recevieRule/toList';
            },
          //根据电销组查询电销总监
            getTeleGroupList(index,rows) {
              rows[index].orgId= '';
              var param ={};
              param.systemCode = "HUIJU";
              param.orgType = 1;
              param.businessLine = rows[index].businessLine;
                console.info(param);
                axios.post('/organization/organization/queryOrgByBusinessline', param)
                .then(function (response) {
                      var result =  response.data;
                      console.info(result);
                      var table=result.data;
                      rows[index].teleOptions= table;
                })
                .catch(function (error) {
                     console.log(error);
                });
            },
        },
        mounted(){
            document.getElementById('addOptimizeRule').style.display = 'block';
        }
    })
</script>
</html>